import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Card } from 'antd';
import styles from './index.less';
import moment from 'moment';

import {
  Const
} from '../../Const';

class PrivateData {
  static lvkeArr = [
    { text: '旅客姓名(NM)', value: 'paxName' },
    { text: '证件类型', value: 'idType', isMap: 'idTypeMap' },
    { text: '证件号', value: 'idNo' },
    { text: '客票号(TK)', value: 'tktNo' },
  ];
  static hangbanArr = [
    { text: '航班号(FD)', value: 'flightNo' },
    { text: '旅客航程(RT)', value: 'segment' },
    { text: '航班日期(FD)', value: 'flightDate' },

  ];
  static xingliArr = [
    { text: '行李总重量(BW)', value: 'pkgWeight' },
    { text: '行李属性', value: 'pkgProperty', isMap: 'pkgPropertyMap' },
  ];
  static xingliYiChangArr = [
    { text: '行李牌号(TN)', value: 'pkgNo' },
    // { text: '行李重量(NW)', value: 'pkgWeight' },
    { text: '行李颜色(CT)', value: 'pkgColor' },
    { text: '行李类型(CT)', value: 'pkgType' },
    { text: '行李描述(CT)', value: 'pkgContent' },
    { text: 'WT编号', value: 'wtCode' },
  ];
  static lingQuArr = [
    { text: '领取人', value: 'recipient' },
    { text: '领取时间', value: 'createTime' },
    { text: '领取联系方式', value: 'recipientPhone' },
    { text: '领件人证件类型', value: 'idType', isMap: 'idTypeMap' },
    { text: '领件证件号', value: 'idNo' },
  ];
  static qitaArr = [
    { text: '创建人', value: 'createId' },
    { text: '创建时间', value: 'createTime' },
    { text: '创建航站', value: 'enterTerminal' },
    { text: '创建航站联系电话', value: 'enterTerminalPhone' },
    { text: '入库人', value: 'createId' },
    { text: '入库时间', value: 'createTime' },
    { text: '出库人', value: 'outUser' },
    { text: '出库时间', value: 'outTime' },
    { text: '出库类型', value: 'outType', isMap: 'outTypeMapNew' },
    { text: '结案状态', value: 'pkgStatus' },
  ];
}

const InfoBox = props => {

  const { detailInfo, overchargeRecipient } = props;

  const dealDetailInfo = useCallback((item) => {
    if (item.isMap) {
      return Const[item.isMap][detailInfo[item.value]]?.text || '';
    } else {
      if (item.value === 'pkgStatus') {
        let val = detailInfo[item.value] || '';
        if (+val === 1) return '已结案';
        return '未结案';
      }
      return (detailInfo[item.value] || '') + (item.unit || '');
    }
  }, [detailInfo]);

  const dealOverchargeRecipient = useCallback((item) => {
    if (item.isMap) {
      return Const[item.isMap][overchargeRecipient[item.value]]?.text || '';
    } else {
      return (overchargeRecipient[item.value] || '') + (item.unit || '');
    }
  }, [overchargeRecipient]);

  const dealXingLiList = useCallback((data, item) => {
    if (item.isMap) {
      return Const[item.isMap][data[item.value]]?.text || '';
    } else {
      return (data[item.value] || '') + (item.unit || '');
    }
  }, []);

  const ItemBoxDom = useCallback(props => {
    const { item } = props;
    return <div>{item.text ? item.text  + '：' : ''}{dealDetailInfo(item)}</div>
  }, [detailInfo]);

  const ItemBoxOverDom = useCallback(props => {
    const { item } = props;
    return <div>{item.text ? item.text  + '：' : ''}{dealOverchargeRecipient(item)}</div>
  }, [overchargeRecipient]);

  const XingLiItemDom = useCallback(props => {
    const { item, data } = props;
    return <div>{item.text ? item.text  + '：' : ''}{dealXingLiList(data, item)}</div>
  }, []);

  return (
    <div className={styles.infoBox}>
      <Card title="旅客信息">
        <div className={styles.itemBox}>
          {PrivateData.lvkeArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
      <Card title="航班信息">
        <div className={styles.itemBox}>
          {PrivateData.hangbanArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
      <Card title="行李信息">
        <div className={styles.itemBox}>
          {PrivateData.xingliArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
        {(detailInfo.pkgDetailInfoList || []).map((item, index) => (
          <div className={styles.itemBox} key={item.id}>
            {PrivateData.xingliYiChangArr.map((m, n) => (
              <XingLiItemDom key={n} item={m} data={item}></XingLiItemDom>
            ))}
          </div>
        ))}
      </Card>
      <Card title="领取详情">
        <div className={styles.itemBox}>
          {PrivateData.lingQuArr.map((item, index) => (
            <ItemBoxOverDom key={index} item={item}></ItemBoxOverDom>
          ))}
        </div>
      </Card>
      <Card title="其他信息">
        <div className={styles.itemBox}>
          {PrivateData.qitaArr.map((item, index) => (
            <ItemBoxDom key={index} item={item}></ItemBoxDom>
          ))}
        </div>
      </Card>
    </div>
  )
};

export default InfoBox;
